<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>503相亲网</title>
    <style>
        .one{
            height: 100px;
            position:relative;
            top: 0px;;
            left:0;
            text-align: center;
            background: url(OIP-C.jpg);
            font-size: 50px;
            color: rgb(60, 91, 68);
        }
        main{
            margin: 0;
            background: url(true.jpg);
            text-align:center;
        }
        #one{
            text-align:center;
            padding-top:20px;
        }
        #tow{
            color:blue;
            font-size: 20px;
            text-decoration:none;
        }
        .tow{
            font-size:20px;
        }
        main img{
            display:inline-block;
            height:400px;
            width:500px;
        }
        .father{
            overflow: hidden;
            color:rgb(14, 14, 240);
            font-size:20px;
        }
        .cmj{
            display: inline-block;
            position:relative;
            height:400px;
            width:500px;
            margin: 30px auto;
        }
        .cmj img{
            height:400px;
            width:500px;
        }
        .zll{
            display:none;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height: 100%;
            background: rgb(0, 0, 0, .3) url(qq_pic_merged_1672120908617.jpg) no-repeat;
        }
        .cmj:hover .zll{
            display: block;   
        }
        .zll1{
            display:none;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height: 100%;
            background: rgb(0, 0, 0, .3) url(mmexport1672132868933.jpg) no-repeat;
        }
        .cmj:hover .zll1{
            display: block;   
        }
        .father div{
            padding-left: 30px;
        }
        .zll2{
            display:none;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height: 100%;
            background: rgb(0, 0, 0, .3) url(QQ图片20230108202558.jpg) no-repeat;
        }
        .cmj:hover .zll2{
            display: block;   
        }
        .zll3{
            display:none;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height: 100%;
            background: rgb(0, 0, 0, .3) url(qq_pic_merged_1672123990363.jpg) no-repeat;
        }
        .cmj:hover .zll3{
            display: block;   
        }
        .zll4{
            display:none;
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height: 100%;
            background: rgb(0, 0, 0, .3) url(qq_pic_merged_1672123906593.jpg) no-repeat;
        }
        .cmj:hover .zll4{
            display: block;   
        }
        .four{
            text-align: center;
        }
        footer{
            background: url(IMG_20221227_150801.jpg) no-repeat;
            width: 100%;
            height: 1000px;
        }
        table{
            font-size:20px;
            position:relative;
            top:10px;
            left:500px;
            color:black;
        }
        .liuwei{
            position:fixed;
            top:130px;
            left:0px;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: pink;
        }
        .liuwei li a {
            display: block;
            color: #000;
            padding: 30px 30px;
            text-decoration: none;
        }
        .liuwei li a:hover {
            background-color: #555;
            color: white;
        }
        .liuwei1{
            position:fixed;
            top:130px;
            right:0px;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: pink;
        }
        .liuwei1 li span {
            display: block;
            color: #000;
            padding: 30px 30px;
            text-decoration: none;
        }
        .liuwei1 li span:hover {
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
    <script>
        window.alert("欢迎来到503相亲网");
    </script>        
    <div class="one">503相亲网</div>
    <main>
        <h2 id="one">欢迎来到503相亲网，这里有503的超级大帅哥，以及理塘家族的各位帅哥和美女</h2>
        <span class="tow" id="contact">以下的帅哥，美女都是单身哦，我是他们的经纪人QQ</span>
        <a href="https://im.qq.com/index" target="_blank" id="tow">:1669904007</a>
        <h3 style="color: gray; font-size:20px;" id="about">照片墙</h3>
        <div class="father">
            <div class="cmj">
                <div class="zll"></div>
                <img src="图片1672119174218.jpg"><span> <a href="hulu.html" target="_blank" style= "color: red;">呼噜宝贝</a> </span>
            </div>
            <div class="cmj">
                <div class="zll1"></div>
                <img src="mmexport1672133009347.jpg">丁真
            </div>

            <div class="cmj">
                <div class="zll2"></div>
                <img src="QQ图片20230108202036.jpg">艾++
            </div>
            <div class="cmj">
                <img src="qq_pic_merged_1672123287636.jpg">503颜值之最
            </div>
           
            <div class="cmj">
                <div class="zll3"></div>
                <img src="1672119389895.jpg">嘴硬强哥
            </div>
            <div class="cmj">
                <div class="zll4"></div>
                <img src="qq_pic_merged_1672123793187.jpg">队长
            </div>
            <img src="图片1672119190800.jpg"><p>全体单身成员</p>
        </div>
    </main>
    <footer>
        <h1 class="four">如果有看上的就赶快填写表格吧，欲找从速，莫失良机</h1>
        <table width="auto">
            <tr>
                <td>我的性别</td>
                <td>
                    <input type="radio" name="sex" id="sex2" checked="checked"><label for="sex2"> 男</label>
                    <input type="radio" name="sex" id="sex1"><label for="sex1"> 女</label>
                </td>
            </tr>
            <tr>
                <td>我的生日</td>
                <td>
                    <select>
                        <option>---请选择年份---</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                        <option>2004</option>
                        <option>2005</option>
                    </select>
                    <select>
                        <option>---请选择月份---</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <select>
                        <option>---请选择天数---</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>我的所在地</td>
                <td>
                    <input type="text" value="江西财经">
                </td>
            </tr>
            <tr>
                <td>婚姻状况</td>
                <td>
                    <input type="radio" name="hun" checked="checked" id="1"><label for="1">已婚</label>
                    <input type="radio" name="hun"  id="2"><label for="2">未婚</label>
                    <input type="radio" name="hun"  id="3"><label for="3">离婚</label>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <input type="text" value="10字以内">
                </td>
            </tr>
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" name="like" id="a" checked="checked"><label for="a">妩媚型</label>
                    <input type="checkbox" name="like" id="b"><label for="b">可爱型</label>
                    <input type="checkbox" name="like" id="c"><label for="c">小鲜肉型</label>
                    <input type="checkbox" name="like" id="d"><label for="d">老腊肉型</label>
                    <input type="checkbox" name="like" id="f"><label for="f">是个人就行</label>
                    <input type="checkbox" name="like" id="e"><label for="e">全都喜欢</label>
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea style="resize:none;">限定50字....</textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button onclick="document.write('注册成功')">注册</button>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="ok" id="ok1"><label for="ok1">我同意注册条款和会员加入标准</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="登陆.html" style="color:blue; text-decoration: none;" id="news" target="_blank">我是会员，立即登录</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h1>
                        我承诺
                    </h1>
                    <ul>
                        <li>年满承诺且单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                 </td>
            </tr>
        </table>
        <div style="text-align: center; font-size: 30px; padding-top: 40px; color:black;">
            千万别犹豫啦，再犹豫就要错过了呀，机会只有一次哦，把握好，一鼓作气，脱单庆祝！
        </div>
    </footer>
    <ul class="liuwei">
        <li><a href="登陆.html" target="_blank">登陆</a></li>
        <li><a href="https://wx.qq.com/" target="_blank">微信已有账号登录</a></li>
        <li><a href="联系方式.html" target="_blank">经纪人的联系方式</a></li>
        <li><a href="表格.html" target="_blank">表格</a></li>
    </ul>
    <ul class="liuwei1">
        <li><span>兄弟们</span></li>
        <li><span>姐妹们</span></li>
        <li><span>千万别</span></li>
        <li><span>错过呀</span></li>
    </ul>
    <p><a href="实验报告.html" target="_blank">实验报告</a></p>
</body>
</html>